<template>
  <BasicDrawer
    v-bind="$attrs"
    @register="registerDrawer"
    :title="getTitle"
    width="1200"
    :showFooter="showFooter"
    destroyOnClose
  >
    <div class="jeecg-basic-table-form-container">
      <a-descriptions title="结算信息" bordered col="3">
        <a-descriptions-item label="总金额" ><span style="font-weight: bold;color: red;">{{parseFloat(recordData.totalAmount).toFixed(2)}}</span> 元</a-descriptions-item>
        <a-descriptions-item label="成功金额" >{{parseFloat(recordData.successAmount).toFixed(2)}} 元</a-descriptions-item>
        <a-descriptions-item label="失败金额" >{{parseFloat(recordData.failAmount).toFixed(2)}} 元</a-descriptions-item>
        <a-descriptions-item label="总笔数" ><span style="font-weight: bold;color: red;">{{recordData.totalNum}}</span> 笔</a-descriptions-item>
        <a-descriptions-item label="成功笔数" >{{recordData.successNum}} 笔</a-descriptions-item>
        <a-descriptions-item label="失败笔数" >{{recordData.failNum}} 笔</a-descriptions-item>
      </a-descriptions>
    </div>
    <!--引用表格-->
    <BasicTable @register="registerTable">
      <!--身份信息插槽插槽-->
      <template #infoSlot="{record}">
        <span style="text-align: left;">
          <p>姓名：<span style="font-weight: bold;">{{record.name}}</span></p>
          <p>手机号码：<span style="font-weight: bold;">{{record.phone}}</span></p>
          <p>证件类型：<span style="font-weight: bold;">{{record.idCardType}}</span></p>
          <p>证件号码：<span style="font-weight: bold;">{{record.idCard}}</span></p>
        </span>
      </template>
      <!--银行信息插槽插槽-->
      <template #bankSlot="{record}">
        <span style="text-align: left;">
          <p>下发类型：<span style="font-weight: bold;">{{record.type_dictText}}</span></p>
          <p>收款账号：<span style="font-weight: bold;">{{record.bankCard}}</span></p>
          <p>银行名称：<span style="font-weight: bold;">{{record.bankName}}</span></p>
          <!--          <p>开户行：<span style="font-weight: bold;">{{record.accountName}}</span></p>-->
        </span>
      </template>
      <!--状态插槽-->
      <template #statusSlot="{record}">
        <a-badge v-if="record.status==0" color="blue" :text="record.status_dictText" />
        <a-badge v-if="record.status==1" color="cyan" :text="record.status_dictText" />
        <a-badge v-if="record.status==2" color="green" :text="record.status_dictText" />
        <a-badge v-if="record.status==3" color="red" :text="record.status_dictText" />
      </template>
      <!--文件插槽-->
      <template #fileSlot="{text}">
        <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
        <a-button v-else :ghost="true" type="danger" preIcon="ant-design:download-outlined" size="small" @click="downloadFile(text)">下载</a-button>
      </template>
    </BasicTable>
  </BasicDrawer>
</template>
<script lang="ts" setup>
import { ref, useAttrs } from "vue";
import { BasicDrawer, useDrawerInner } from "/@/components/Drawer";
import { BasicTable } from "/@/components/Table";
import { useListPage } from "/@/hooks/system/useListPage";
import { caishuiTaskSettleItemColumns } from "../CaishuiTaskSettle.data";
import { itemList } from "../CaishuiTaskSettle.api";
import {downloadFile} from '/@/utils/common/renderUtils';
import { isArray } from "/@/utils/is";

  // 声明Emits
  const emit = defineEmits(['success', 'register']);
  const attrs = useAttrs();
  const showFooter = ref(false);
  //获取标题
  const getTitle = ref("发放明细");
  const queryParam = ref<any>({});
  const recordData = ref<any>({});

  //抽屉赋值
  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
    setDrawerProps({ confirmLoading: false, showFooter: showFooter.value });
    getTitle.value = "【" + data.record.name + "】发放明细"
    recordData.value = data.record;

  });
  //注册table数据
  const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
    tableProps: {
      title: '',
      api: itemList,
      columns: caishuiTaskSettleItemColumns,
      canResize:false,
      useSearchForm: false,
      striped: true,
      showIndexColumn: true,
      showActionColumn: false,
      beforeFetch: (params) => {
        //[因为状态字符列加了filters] 判断参数是否为数组，数组的话则转换为字符串
        if(params.status && isArray(params.status)){
          params.status = params.status.join(",");
        }
        params.mainId = recordData.value.id;
        // console.log("----查询条件---:",params)
        return Object.assign(params, queryParam.value);
      },
    },
  });
  const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection, selectedRowKeys }] = tableContext;



</script>
<style lang="less" scoped>
.jeecg-basic-table-form-container {
  margin-bottom: -10px;
  .table-page-search-submitButtons {
    display: block;
    white-space: nowrap;
  }
  .query-group-cust{
    width: calc(50% - 15px);
    min-width: 100px !important;
  }
  .query-group-split-cust{
    width: 30px;
    display: inline-block;
    text-align: center
  }
}
</style>
